<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            textarea {
                width: 400px;
                height: 200px;
                margin: 100px auto;
                margin-left: 500px;
                position: relative;
            }
    
            button {
                position: absolute;
                bottom: 390px;
            }
    
            li {
                width: 500px;
                padding: 5px;
                background-color: rgb(209, 245, 218);
                font-size: 14px;
                margin: 5px 0;
            }
               
            ul {
                margin-top: 50px;
                margin-left: 400px;
            }
            
            
            
        </style>
    </head>
    
    <body>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <button>发布</button>
        <ul>
            <li>比屋xxxxx</li>
            <li>比屋xxxxx</li>
            <li>比屋xxxxx</li>
        </ul>
    
        <script>
            const btnObj = document.querySelector("button")
            const ulObj = document.querySelector("ul")
            const textObj = document.querySelector("textarea")

            btnObj.onclick = function(){
                // console.log("haa")
                if(textObj.value.trim().length>3){
                    //执行
                    const liObj = document.createElement("li")
                    liObj.innerText = textObj.value
                    
                    // ulObj.appendChild(liObj)     //默认最后一行
                    ulObj.insertBefore(liObj,ulObj.children[0])
                }else{
                    alert("太短了")
                }
            }
        </script>
</body>
</html>